<template>
  <div>
    <div id="printDHBOM">
      <el-table
        :data="BomlList"
        size="small"
        border
        stripe
        width="297mm"
        :cell-style="cellStyle"
        :header-cell-style="headerCellStyle"
      >
        <el-table-column label="序号" width="55" align="center">
          <template slot-scope="{ $index }">{{ $index + 1 }}</template>
        </el-table-column>
        <!-- <el-table-column prop="colour" label="调样"></el-table-column> -->
        <el-table-column prop="confirm" label="确认" width="55" align="center">
          <template slot-scope="{ row }">
            <el-checkbox
              v-model="row.confirm"
              true-label="1"
              false-label="0"
              @click.native.prevent
            ></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column
          prop="comment"
          label="备注"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="material_img" label="图片" width="140">
        <template slot-scope="{ row }">
          <el-image :preview-src-list="[row.material_img]" :src="row.material_img" style="width:100px;height:100px" v-if="row.material_img"></el-image>
        </template>
      </el-table-column>
        <el-table-column
          prop="materiel_major_category"
          label="物料类型"
          width="70"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="materiel_minor_category"
          label="物料分类"
          width="70"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="materiel_number"
          label="物料编码"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="materiel"
          label="物料名称"
          width="160"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="part"
          label="部位"
          width="70"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="materiel_attribute"
          width="200"
          label="属性"
          show-overflow-tooltip
        >
          <template slot-scope="{ row }">
            <div class="attribute">
              <div
                v-for="(item, index) in JSON.parse(row.materiel_attribute)"
                :key="index"
              >
                <div>{{ item.name }}</div>
                <div>{{ item.value }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="" width="20" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          :label="item.colour"
          v-for="(item, index) in Colour"
          :key="index"
          align="center"
        >
          <template scope="{ row }">
            <div :style="colorStyle(row, index)">
              {{
                (row.colours[index] &&
                  row.colours[index].colours[0] &&
                  row.colours[index].colours[0].value) ||
                ""
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="materiel_major_unit"
          label="单位"
          width="55"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="material_details" label="用料详情" width="120">
          <template slot-scope="{ row }">
            <div>单耗：{{ row.material_details | toFixedTwo }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="price"
          label="大货单价"
          width="70"
          show-overflow-tooltip
        >
          <template slot-scope="{ row }">
            {{ row.price | toFixedTwo }}
          </template>
        </el-table-column>
        <el-table-column
          prop="supplier"
          label="供应商"
          width="180"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="supplier_contact_name"
          label="联系人"
          width="70"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="supplier_phone"
          label="联系方式"
          width="120"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="supplier_address"
          label="地址"
          show-overflow-tooltip
        >
        </el-table-column>
        <!-- <el-table-column prop="materiel_major_unit" label="调样备注"> </el-table-column> -->
        <!-- <el-table-column label="" align="center"> </el-table-column> -->
      </el-table>
    </div>

    <download-excel
      v-if="number"
      class="export-excel-wrapper"
      :data="BomlList"
      :fields="json_fields"
      :before-generate="startDownload"
      :title="number + '大货BOM'"
      :name="number + '大货BOM' + '.xls'"
    >
      <div class="export pointer">导出</div>
    </download-excel>
    <!-- <div class="export pointer" v-print="'#printDHBOM'">导出</div> -->
  </div>
</template>

<script>
export default {
  props: {
    BomlList: [],
    tabHeight: 0,
    number: "",
    Colour: [],
  },
  data() {
    return {
      json_fields: {
        确认: "confirm",
        备注: "comment",
        物料类型: "materiel_major_category",
        物料分类: "materiel_minor_category",
        物料编码: "materiel_number",
        物料名称: "materiel",
        部位: "part",
        属性: "materiel_attributetext",
        单位: "materiel_major_unit",
        用料详情: "material_details",
        大货单价: "price",
        供应商: "supplier",
        联系人: "supplier_contact_name",
        联系方式: "supplier_phone",
        地址: "supplier_address",
      },
    };
  },
  filters: {
    toFixedTwo(e) {
      return Number(e).toFixed(2);
    },
  },
  mounted() {
    let { Colour, BomlList, json_fields } = this;
    for (let index = 0; index < Colour.length; index++) {
      json_fields[Colour[index].colour] = Colour[index].colour + index;
    }
    for (let index = 0; index < BomlList.length; index++) {
      let materiel_attribute = JSON.parse(BomlList[index].materiel_attribute);
      let materiel_attributetext = "";
      for (let key in materiel_attribute) {
        let text =
          materiel_attribute[key].name + "-" + materiel_attribute[key].value;
          materiel_attributetext = materiel_attributetext + text + ";";
      }
      BomlList[index].materiel_attributetext = materiel_attributetext;

      for (let idx = 0; idx < Colour.length; idx++) {
        let colourkey = Colour[idx].colour + idx;
        BomlList[index][colourkey] =
          BomlList[index].colours[idx] != undefined &&
          BomlList[index].colours[idx].colours.length
            ? BomlList[index].colours[idx].colours[0].value
            : "";
      }
    }

    this.json_fields = json_fields;
    this.BomlList = BomlList;
    console.log("BomlList", BomlList);
  },
  methods: {
    headerCellStyle({ column }) {
      let { Colour } = this;
      let index = Colour.map((e) => e.colour).indexOf(column.label);

      if (index != -1) {
        let bgcolor = Number(Colour[index].colour_value).toString(16);
        let rgb = this.hexToRgb("#" + bgcolor);
        let rgbArr = [rgb.r, rgb.g, rgb.b];
        let color = this.resBgColor(rgbArr);
        return {
          background: "#" + bgcolor,
          color,
        };
      }
      return { background: "#F3F4F7", color: "#555" };
    },
    colorStyle(row, index) {
      if (
        row.colours[index] &&
        row.colours[index].colours[0] &&
        row.colours[index].colours[0].code
      ) {
        let bgcolor = Number(row.colours[index].colours[0].code).toString(16);
          bgcolor = bgcolor.length >= 6 ? bgcolor : bgcolor.padStart(6, "0");
        let rgb = this.hexToRgb("#" + bgcolor);
        let rgbArr = [rgb.r, rgb.g, rgb.b];
        let color = this.resBgColor(rgbArr);
        return {
          background: "#" + bgcolor,
          color,
          "text-align": "center",
        };
      }
      return {};
    },
    cellStyle(row, rowIndex) {
      if (row.columnIndex == 9 && row.row.materiel_major_category == "主料") {
        return {
          background: "red",
        };
      }
    },
    resBgColor(rgbArr) {
      // 当color值大于128时,color值偏向255,即#ffffff,此时字体颜色应为#000000
      // 当color值小于128时,color值偏向0,即#000000,此时字体颜色应为#ffffff

      var color =
        0.213 * rgbArr[0] + 0.715 * rgbArr[1] + 0.072 * rgbArr[2] > 255 / 2;
      return color ? "#000000" : "#ffffff";
    },
    hexToRgb(val) {
      //HEX十六进制颜色值转换为RGB(A)颜色值
      // 16进制颜色值的正则
      var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
      // 把颜色值变成小写
      var color = val.toLowerCase();
      var result = "";
      if (reg.test(color)) {
        // 如果只有三位的值，需变成六位，如：#fff => #ffffff
        if (color.length === 4) {
          var colorNew = "#";
          for (var i = 1; i < 4; i += 1) {
            colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
          }
          color = colorNew;
        }
        // 处理六位的颜色值，转为RGB
        var colorChange = [];
        for (var i = 1; i < 7; i += 2) {
          colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
        }
        result = "rgb(" + colorChange.join(",") + ")";
        return {
          rgb: result,
          r: colorChange[0],
          g: colorChange[1],
          b: colorChange[2],
        };
      } else {
        result = "无效";
        return { rgb: result };
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.export {
  width: 40px;
  height: 40px;
  background: #2c70d6;
  color: #ffffff;
  border-radius: 50%;
  font-size: 14px;
  text-align: center;
  line-height: 40px;
  position: absolute;
  top: 0;
  right: 30px;
}
.attribute {
  display: flex;
  flex-wrap: wrap;
  > div {
    border: 1px solid #888080;
    border-radius: 2px;
    overflow: hidden;
    display: flex;
    margin-right: 4px;
    margin-bottom: 2px;
    > div {
      padding: 2px 6px;
    }
    > div:nth-child(1) {
      color: #ffffff;
      background: #888080;
    }
  }
}
</style>
